<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件在线转PDF和PNG</title>
    <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/lib/viewer/viewer.min.css">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>

<body>
    <h4 class="title">文档在线转PDF和图片</h4>
    <div class="card">
        <div class="input-card">
            <div class="has-file">
                <div class="file-warp">
                    <div class="file-content"></div>
                </div>
                <div class="file-btn"></div>
            </div>
            <div class="no-file">
                <input type="file" name="file" class="file-input" id="fileUploader">
                <button class="btn btn-primary">点击选择文件</button>
                <p class="mt-3">请上传需要转换的文件。最大支持50M, 支持Office、TXT、PDF、图片等常见文件格式</p>
            </div>
        </div>
        <div class="item pdf-viewer text-center">
            
        </div>
        <div class="item content-png">
            <div class="row" data-viewer="viewer-group">

            </div>
        </div>
    </div>

    <div class="dialog">
        <div class="dialog-main">
            <img src="/assets/img/loading.gif" alt="loading">
        </div>
    </div>

    <script type="text/html" id="pdf-item">
        <a class="btn btn-success" href="/assets/lib/pdfjs/web/viewer.html?file={{url}}" target="_blank">PDF 在线预览</a>
    </script>

    <script type="text/html" id="png-item">
        {{each list}}
        <div class="col-4">
            <div class="png-item">
                <img src="{{$value.url}}" alt="{{$value.name}} 第{{$index + 1}}页">
            </div>
        </div>
        {{/each}}
    </script>

    <script src="/assets/lib/jquery/jquery.min.js"></script>
    <script src="/assets/lib/uploader/uploader.min.js"></script>
    <script src="/assets/lib/viewer/viewer.min.js"></script>
    <script src="/assets/lib/template/template-web.js"></script>

    <script>
        $(function () {
            // 图片浏览器
            var viewer = null;
            // 文件上传
            $('#fileUploader').uploader({
                url: '/uploader',
                singleUpload: true,
                autoUpload: true,
                dataType: 'json',
                method: 'POST',
                upload: function (e) { },
                start: function (e) {
                    $('.no-file').hide();
                    $('.has-file').show();
                    $('.dialog').show();
                },
                progress: function (e) {
                    var percent,
                        percentage;
                    if (e.lengthComputable) {
                        percent = Math.round(e.loaded / e.total * 100);
                        percentage = String(percent);
                        $('.file-content').text(percentage);
                    }
                },
                done: function (e, data, textStatus) {
                    if (data.state === 'ok') {
                        $('.file-content').text(data.t);
                        $('[data-viewer="viewer-group"]').empty().html(template('png-item', {
                            list: data.urls
                        }));
                        $('.content-png').show();
                        $('.pdf-viewer').empty().html(template('pdf-item', {
                            url: data.url
                        }));
                        $('.pdf-viewer').show();

                        viewer = new Viewer($('[data-viewer="viewer-group"]')[0], {
                            toolbar: 2,
                        });
                    }
                },
                fail: function (e, textStatus, errorThrown) {
                    alert('请求服务器出错，请联系管理员');
                },
                end: function (e, textStatus) {
                },
                uploaded: function (e) {
                    $('.dialog').hide();
                }
            });
            // 取消文件
            $('.file-btn').on('click', function () {
                if (viewer != null) {
                    viewer.destroy();
                }

                $('#fileUploader').val('');
                $('.no-file').show();
                $('.has-file').hide();
                $('[data-viewer="viewer-group"]').empty();
                $('.pdf-url').val('');
                $('.content-png').hide();
                $('.pdf-viewer').hide();
            });

        });
    </script>

</body>

</html>